<template>
	
	<!-- 全局 -->
	<view class="content">
		<!-- 顶部背景图 -->
		<view class="background">
			<image src="../../static/homeimages/background-index.jpg" mode=""></image>
		</view>
		<!-- 整体 -->
		<view class="all">
			<!-- 搜索框 -->
			<view class="search">
				<image src="../../static/homeimages/sea.png" mode=""></image>
				<input type="text" placeholder="搜索乡村/土特产/民宿" />
			</view>
			<!-- 轮播图 -->
			<view class="banners">
				<swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true">
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/homeimages/background-index2.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"><image src="../../static/homeimages/background-index3.jpg" mode=""></image></view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 乡村 -->
			<view class="module">
				<view class="title">
					<text>乡村</text>
					<navigator url="/pages/village/village"><text>更多></text></navigator>
				</view>
				<view class="details">
					<view>
						<text :class="activeIndex === 0 ? 'active' : ''"
							@click="activeIndex = 0">{{ villageData[0].name }}</text>
						<text :class="activeIndex === 1 ? 'active' : ''"
							@click="activeIndex = 1">{{ villageData[1].name }}</text>
					</view>
					<view class="recommend">
						<view v-for="(village, index) in villageData" :key="index" class="recommend_item">
							<view class="image_j">
								<image :src="village.image" mode=""></image>
							</view>
							<text>{{ village.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="module">
				<view class="title">
					<text>地方特色</text>
					<navigator><text>更多></text></navigator>
				</view>
				<view class="details">
					<view>
						<text :class="activeIndexo === 0 ? 'active' : ''"
							@click="activeIndexo = 0">{{ foodDatas[0].name }}</text>
						<text :class="activeIndexo === 1 ? 'active' : ''"
							@click="activeIndexo = 1">{{ foodDatas[1].name }}</text>
					</view>
					<view class="detail">
						<view v-for="(food, index) in foodData" :key="index">
							<image :src="food.image"></image>
							<text>{{ food.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				activeIndexo: 0,
				villageData: [{
						name: '韶山公园',
						image: '../../static/homeimages/zhaoshangongyuan.jpg'
					},
					{
						name: '上温村',
						image: '../../static/homeimages/shangwencun.png'
					},
					{
						name: '童家塔村',
						image: '../../static/homeimages/tjtc.png'
					},
					{
						name: '明德乡干洞',
						image: '../../static/homeimages/mdxgd.png'
					}
				],
				foodDatas: [{
						name: '一方人',

					}, {
						name: '农掌柜'
					}
					// 其他食物数据...
				],
				foodData: [{
						name: '醉仙麻辣牛肉',
						image: '../../static/homeimages/niurou.png'
					},
					// 其他食物数据...
				],
				images: [{
						src: "../../static/homeimages/background-index3.jpg"
					},
					{
						src: "../../static/homeimages/background-index3.jpg"
					},
					{
						src: "../../static/homeimages/background-index3.jpg"
					},
					// 继续添加更多的图片对象
				],
				currentIndex: 0
			};
		},

		onLoad() {},
		methods: {
			 goToPrivacy() {
			      uni.navigateTo({
			        url: '/pages/privacy/privacy'
			      });
			    }
		}
	};
</script>


<style>
	page{
		background-color: #e0e3e0;
		
	}
	.content {
		position: relative;
		width: 100%;
		height: calc(100vh - 50rpx);
		background-color: #e0e3e0;

	}

	.background {
		width: 100%;
		height: 380rpx;
		opacity: 0.7;
		position: absolute;
		top: 0;

	}

	.background image {
		width: 100%;
	}

	.all {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 30rpx;
		height: calc(100vh - 50rpx);
		position: absolute;
		top: 0;

	}

	.active {
		border-bottom: 7rpx solid green;
	}

	.search {
		width: 100%;
		height: 70rpx;
		border-radius: 40rpx;
		background-color: #eee7d5;
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.search image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}

	.search input {
		vertical-align: middle;

	}

	.banners {
		width: 100%;
		height: 307rpx;
		/* background-color: aqua; */
		overflow: hidden;
		margin: 20rpx 0;
		box-sizing: border-box;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
		/* background-color: #616161; */
		overflow: hidden;
	}
	.swiper-item image{
		width: 100%;
		height: 100%;
	}
	.module {
		/* background-color: #ffffff; */
		height: 650rpx;
		margin-top: 20rpx;
	}

	.title {
		display: flex;
		background-color: #ffffff;
		border-radius: 10rpx;
		height: 65rpx;
		justify-content: space-between;
		align-items: center;
		font-size: 40rpx;
	}

	.title navigator:nth-child(2) text {
		font-size: 30rpx;
		color: #616161;
	}

	.details {
		margin-top: 10rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 0 10rpx;
	}

	.details view:nth-child(1) text {
		margin-left: 20rpx;
	}

	.recommend {
		display: grid;
		grid-template-columns: 1fr 1fr;

	}

	.recommend {
		display: grid;
		grid-template-columns: 1fr 1fr;
		/* gap: 40rpx; */
		grid-row-gap: 10rpx;
		grid-column-gap: 20rpx;
		margin-top: 20rpx;

	}

	.recommend_item {
		width: 100%;
		height: 260rpx;
		/* background-color: palegreen; */
		overflow: hidden;
		text-align: center;
	}

	.image_j {
		width: 100%;
		border-radius: 30rpx;
		height: 220rpx;
		overflow: hidden;
		background-color: bisque;
	}

	.image_j image {
		width: 100%;
		height: 100%;
	}

	.detail {
		width: 100%;
		height: 330rpx;
		margin-top: 20rpx;
	}

	.detail view image {
		width: 100%;
		height: 270rpx;
	}
</style>